<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="cache-control" content="no-siteapp">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-mobile-web-app-capable"content="yes">
    <meta name="apple-mobile-web-app-status-bar-style"content="black"/>
    <script>
      ;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Android)/i.test(navigator.userAgent) &&
        ((head = document.getElementsByTagName('head')),
        (viewport = document.createElement('meta')),
        (viewport.name = 'viewport'),
        (viewport.content =
          'target-densitydpi=device-dpi, width=375px, user-scalable=no'), // 375为设计稿的一半
        head.length > 0 && head[head.length - 1].appendChild(viewport))
    </script>
    <link rel="stylesheet" href="./flexble.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
  <header class="header">
      <!-- 轮播图 -->
      <div class="swiper">
        <div class="swiper-group">
          <img class="img" data-v="0" src="./banner/1.jpg"  alt="">
          <img class="img" data-v="1" src="./banner/2.jpg"  alt="">
          <img class="img" data-v="2" src="./banner/3.jpg"  alt="">
          <img class="img" data-v="3" src="./banner/4.jpg"  alt="">
        </div>
        <!-- 缩略图 -->
    </div>
  </header>
  <main class="main">
    <div class="main-title">
      <div>[巴西93厂] 牛腩</div>
      <div class="main-title-tags">
        <span style="background-color: #fff6ed;color: #ffcb9b;border: .0267rem solid #ffcb9b;" class="main-title-tag">新品</span>
        <span style="background-color: #e7f5e9;color: #7cca84;border: .0267rem solid #7cca84;" class="main-title-tag">清真</span>
        <span style="background-color: #ecf7ff;color: #62bcfc;border: .0267rem solid #62bcfc;" class="main-title-tag">易解冻</span>
        <span style="background-color: #ffffff;color: #e93e28;border: .0267rem solid #e93e28;" class="main-title-tag">特价</span>
      </div>
      <div class="main-text">猪肉馅包子饺子，点心肠粉半成品</div>
      <div class="main-list">
        <div class="main-list-item">
          <div class="main-list-item-label">质检报告</div>
          <div class="main-list-item-value">查看 ></div>
        </div>
        <div class="main-list-item">
          <div class="main-list-item-label">中国</div>
          <div class="main-list-item-value">产地</div>
        </div>
        <div class="main-list-item">
          <div class="main-list-item-label">1.6kg</div>
          <div class="main-list-item-value">规格</div>
        </div>
        <div class="main-list-item">
          <div class="main-list-item-label">365天</div>
          <div class="main-list-item-value">保质期</div>
        </div>
        <div class="main-list-item">
          <div class="main-list-item-label">冷藏</div>
          <div class="main-list-item-value">需要冷藏</div>
        </div>
        <div class="main-list-item">
          <div class="main-list-item-label">限量款</div>
          <div class="main-list-item-value">限量</div>
        </div>
      </div>
    </div>
    <div class="main-message">
      <div class="main-message-address">
        <div class="main-message-address-left">
          <div class="main-message-text">送至</div>
        </div>
        <div class="main-message-address-right">
          <div class="main-message-label" style="color: black;">碗碗香麻辣烫</div>
          <p class="main-message-value">
            广州市番禺区汉溪长隆G口25号奈雪的茶一楼办事处
          </p>
        </div>
      </div>
      <div class="main-message-address">
        <div class="main-message-address-left" style="margin-right: 0px;">
          <div class="main-message-text" >售后
            <span style="color: red;">*</span>
          </div>
        </div>
        <div class="main-message-address-right" style="display: flex;justify-content: space-between;align-items: center;flex: 1;">
          <div class="main-message-label">非质量问题不支持无理由退换货</div>
          <p class="main-message-value">
            >
          </p>
        </div>
      </div>
      <div class="main-message-address">
        <div class="main-message-address-left">
          <div class="main-message-text">活动</div>
        </div>
        <div class="main-message-address-right">
          <div class="main-message-label">
            <div class="actitives-tags">
              <div class="actitives-tag">
                满28.88减2.88
              </div>
              <div class="actitives-tag">
                满88.88减8.88
              </div>
              <div class="actitives-tag">
                满288.88减28.88
              </div>
            </div>
            <!-- <div style="margin-left: .1667rem;">></div> -->
          </div>
          <div class="actitives-text">
            <div>
              <div style="width: 1.3333rem;color: red;border: 1px solid red;padding: .133rem;font-size: .3567rem;text-align: center;margin-right: .1333rem;
              border-radius: .1667rem;">满赠</div>
            </div>
            <div>每买满一件送[安井]黄金蛋饺一件、[鹰宏亿]年糕小串一件</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-good-change">
      <!-- 打包买货 -->
      <div class="goods-num">
        <div class="goods-num-change">一件（10包）<span style="font-size: .3867rem;border-radius: .1333rem;padding: .1333rem;border: .0267rem solid #999999;">￥6.35/斤</span></div>
        <div class="goods-num-message">
          <div class="goods-reudce">-</div>
          <div class="nums">0</div>
          <div class="goods-add">+</div>
        </div>
      </div>
      <div>
        <span style="color: red;">￥146.72</span>
        <del style="color: #999999;font-size: .42rem;">￥159.67</del>
      </div>
      <div class="goods-comstum">
        <div class="goods-comstum-item">
          <div class="goods-label">每满5包减4.1（￥40/包）</div>
          <div class="goods-comstum-btn">+5</div>
        </div>
        <div class="goods-comstum-item">
          <div class="goods-label">每满10包减6.1（￥38/包）</div>
          <div class="goods-comstum-btn">+10</div>
        </div>
      </div>
    </div>
    <!-- 榜单 -->
    <div class="goods-number-one">
      <img style="width: 0.8333rem;height: 0.83333rem;vertical-align: middle;" src="./img/bangdan.png" alt="">
      <span>榜单</span>
      <span>|</span>
      <span>晓餐推荐卤味鸭货-鸭腿 第<span style="color: #f4a095;">3</span>名</span>
      <span style="float: right;">></span>
    </div>
    <!-- tab栏 -->
    <div class="tabs-good">
      <div class="tabs">
        <div class="tab active">推荐加购</div>
        <div class="tab">相似商品</div>
        <!-- 商品数据 -->
      </div>
      <div class="goods-add-pay">
          <div class="goods-pay-item">
            <img  src="./banner/1.jpg" alt="">
            <p style="font-size: .4267rem;">[新西兰星牌]牛肚片牛肚皮</p>
            <div style="color: red;font-size: .32rem;display: flex;">
              <span style="border: .0267rem solid red;padding:0.04rem .1333rem;border-radius: .12rem;">特价</span>
            </div>
            <div class="price">
              <span style="color: red;font-size: .38rem;">￥2533.97</span>
              <span style="color: #cccccc;font-size: .38rem;">/包</span>
              <div class="icon-cart"><img style="width: .5333rem;height: .5333rem;" src="./img/购物车空(1).png" alt=""></div>
            </div>
          </div>
          <div class="goods-pay-item">
            <img  src="./banner/2.jpg" alt="">
            <p style="font-size: .4267rem;">[新西兰星牌]牛肚片牛肚皮</p>
            <div style="color: red;font-size: .32rem;display: flex;">
              <span style="border: .0267rem solid red;padding:0.04rem .1333rem;border-radius: .12rem;">特价</span>
            </div>
            <div class="price">
              <span style="color: red;font-size: .38rem;">￥2533.97</span>
              <span style="color: #cccccc;font-size: .38rem;">/包</span>
              <div class="icon-cart"><img style="width: .5333rem;height: .5333rem;" src="./img/购物车空(1).png" alt=""></div>
            </div>
          </div>
          <div class="goods-pay-item">
            <img  src="./banner/3.jpg" alt="">
            <p style="font-size: .4267rem;">[新西兰星牌]牛肚片牛肚皮</p>
            <div style="color: red;font-size: .32rem;display: flex;">
              <span style="border: .0267rem solid red;padding:0.04rem .1333rem;border-radius: .12rem;">特价</span>
            </div>
            <div class="price">
              <span style="color: red;font-size: .38rem;">￥2533.97</span>
              <span style="color: #cccccc;font-size: .38rem;">/包</span>
              <div class="icon-cart"><img style="width: .5333rem;height: .5333rem;" src="./img/购物车空(1).png" alt=""></div>
            </div>
          </div>
      </div>
    </div>
    <div class="main-good-detail">
      <p style="margin-bottom: .2667rem;">商品详情</p>
      <img style="width: 100%;" src="./banner/5.png" alt="">
    </div>
  </main>
  <div class="outer-footer">
    <footer class="footer">
      <div class="left">
        <div class="constum">
          <span class="icon">
            <img src="./img/客服.png" alt="">
          </span>
          <span>客服</span>
        </div>
        <div class="star">
          <span class="icon">
            <img src="./img/收藏.png" alt="">
          </span>
          <span>收藏</span>
        </div>
        <div class="cat">
          <span class="icon">
            <img src="./img/购物车空.png" alt="">
          </span>
          <span>购物车</span>
        </div>
      </div>
      <div class="right">
        <div class="right-btn">加入购物车</div>
      </div>
    </footer>
  </div>
  <!-- 回到顶部 -->
  <div class="to-top" style="display: none;">
    <img src="./img/回到顶部.png" style="width: 1.0rem;height: 1.0rem;" alt="">
  </div>
</body>
<script src="flexble.js"></script>
<script src="./index.js"></script>
</html>